<template>
    <div class="own_article_tab">
        <el-button type="primary" @click="editArticle(null)">发布贴文</el-button>
        <div class="own_article_list">
            <div class="own_article_item" v-for="article in articleList" :key="article.articleId">
                <article-component :title="article.articleTitle" :desc="article.articleDesc"
                :authorPic="article.authorPicUrl"
                :cover="article.articleCoverUrl"
                :id="article.articleId"
                :eye="article.articleEye"
                :comment-count="article.commentCount"
                :timestamp="article.articleDate"
                :nickName="article.articleNickname"/>
                <el-dropdown style="float:right;margin: 20px auto 0px;color: var(--el-color-primary);">
                    <span class="el-dropdown-link">
                        编辑
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="editArticle(article.articleId)">修改</el-dropdown-item>
                            <el-dropdown-item>封禁</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown><el-divider style="float:right" border-style="dotted" />
            </div>
        </div>
        <!-- <el-pagination style="display:flex;justify-content: center;" background layout="prev, pager, next"
            :hide-on-single-page="true" :total="1000" /> -->
    </div>
</template>

<script>
import ArticleComponent from '../ArticleComponent.vue'

export default {
    components: { ArticleComponent },
    data() {
        return {
            articleList: []
        }
    },
    created() {
        this.$request.get('/article/user_article_list').then(data => {
            // console.log(data);
            this.articleList = data.data
            if(this.articleList==null)return
            this.articleList.sort((article1,article2)=>article2.articleDate-article1.articleDate)
        })
    },
    methods: {
        editArticle(articleId) {
            if(articleId==null)
            window.open(document.location.origin + '/edit/article_edit.html')
            else window.open(document.location.origin + '/edit/article_edit.html?article_id='+articleId)
        }
    },

}
</script>

<style scoped>
.own_article_list {
    display: flex;
    flex-wrap: wrap;
}
.own_article_item {
    padding: 10px;
    width: 50%;
}
</style>